<template>
  <div class="mapBox">
    <p>平台高峰预警信息(2条)</p>
    <div class="box4" ref="map"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import chinaJSON from "./china.json";
let map = ref();
//注册中国地图
echarts.registerMap("china", chinaJSON as any);
onMounted(() => {
  let mychart = echarts.init(map.value);
  mychart.setOption({
    //地图组件
    geo: {
      map: "china",
      roam: true,
      top: 150,
      zoom: 1.5,
      //地图文字设置
      label: {
        show: true,
        fontSize: 12,
      },
      //每一个多变形样式
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "Turquoise", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "DeepSkyBlue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        //地图高亮效果
        emphasis: {
          itemStyle: {
            color: "",
          },
        },
      },
    },
    series: [
      {
        type: "lines", //航线
        lineStyle: {
          type: "dotted",
          curveness: 0.2,
          dashOffset: 1,
        },
        data: [
          {
            coords: [
              [116.405285, 39.904989], //起点
              [123.429096, 41.796767], //终点
            ],
            lineStyle: {
              color: "blue",
              width: 2,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点
              [108.948024, 34.263161], //终点
            ],
            lineStyle: {
              color: "blue",
              width: 2,
            },
          },
          {
            coords: [
              [123.429096, 41.796767], //起点
              [108.948024, 34.263161], //终点
            ],
            lineStyle: {
              color: "blue",
              width: 2,
            },
          },
          {
            coords: [
              [123.429096, 41.796767], //起点
              [87.617733, 43.792818], //终点
            ],
            lineStyle: {
              color: "blue",
              width: 2,
            },
          },
          {
            coords: [
              [87.617733, 43.792818], //起点
              [108.948024, 34.263161], //终点
            ],
            lineStyle: {
              color: "blue",
              width: 2,
            },
          },
        ],
        //开启特效
        effect: {
          show: true,
          symbol:
            'path://M365.084444 223.573333l285.724445 142.222223 199.111111-127.004445A76.657778 76.657778 0 0 1 952.888889 256a69.831111 69.831111 0 0 1-14.222222 97.848889l-449.991111 332.8a199.111111 199.111111 0 0 1-218.453334 12.231111l-98.133333-56.888889 66.275555-93.582222 31.288889 7.68a99.555556 99.555556 0 0 0 79.075556-14.222222L440.888889 482.133333 218.311111 281.6a16.782222 16.782222 0 0 1-1.28-23.608889 21.902222 21.902222 0 0 1 4.124445-3.271111l50.488888-28.444444a99.555556 99.555556 0 0 1 93.44-2.702223zM118.897778 518.968889L205.795556 540.444444l-60.871112 85.333334-72.391111-41.244445a31.146667 31.146667 0 0 1-11.377777-42.666666 16.213333 16.213333 0 0 1 2.133333-3.271111 53.475556 53.475556 0 0 1 55.608889-19.626667z"',
          roundTrip: true,
          symbolSize: 10,
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.mapBox{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .box4{
    height: 650px;
  }
  p{
   margin-top: 30px;
   height: 50px;
   text-align: center;
   line-height: 50px;
   font-size: 20px;
   color: #29fcff;
   background: url(../../images/dataScreen-header-warn-bg.png)no-repeat;
   background-size: 100% 100%;
  }
}

</style>
